import { Column } from "@ant-design/plots";
import { useRequest } from "@umijs/max";
import React from "react"
import { getFlowStat } from "./service";

interface FlowStatProps {
    height?: number
}

const FlowStat: React.FC<FlowStatProps> = ({
    height,
}) => {
    const { data } = useRequest(() => {
        return getFlowStat({})
    })

    const chartComStyle = {
        axis: {
            x: {
                labelFill: '#fff',
            },
            y: {
                labelFill: '#fff',
            },
        },
        legend: {
            color: {
                itemLabelFill: '#fff'
            },
            size: {},
        },
        height: height,
    }

    const chartRef = React.useRef(null);

    const map = {
        click: { text: '点击' },
        search: { text: '搜索' },
        onLaunch: { text: '启动小程序' },
        onLoad: { text: '打开页面' },
    }

    const newData = data?.filter((item: any) => item.behaviorType != 'change')?.map((item: any) => {
        return {
            date: item?.date,
            count: item?.count,
            sub_type: map[item?.behaviorType]?.text || item?.behaviorType
        }
    }) || []

    const config = {
        data: newData,
        xField: 'date',
        yField: 'count',
        colorField: 'sub_type',
        style: {
            // 矩形四个方向的内边距
            inset: 5,
        },
    };

    return <Column ref={chartRef} {...config} {...chartComStyle} />
}

export default FlowStat